<template>
  <div id="lineCombine" style="width: 100%; height: 30vh"></div>
</template>

<script>
/* eslint-disable */
import request from '@/network/request'
import * as echarts from 'echarts';
    export default {
        name: "componentAlarm",
      data() {
          return {
            timer: null,
            option: {
              color: ['#2f4554', '#d48265', '#c23531', '#FFD700', '#FFBBFF', '#91CC75'],
              tooltip: {
                trigger: 'axis',
              },
              legend: {
                data: ['一级报警', '二级报警', '一级报警同比', '一级报警环比', '二级报警同比', '二级报警环比'],
                textStyle: {
                  color: '#fff'
                }
              },
              xAxis: [
                {
                  splitLine: {
                    show: false
                  },
                  type: 'category',
                  axisTick: {
                    alignWithLabel: true
                  },
                  data: [],
                  axisLine: {
                    lineStyle: {
                      color: '#fff',
                      width: 1, //这里是为了突出显示加上的
                    }
                  },
                }
              ],
              yAxis: [
                {
                  splitLine: {
                    show: false
                  },
                  type: 'value',
                  name: '报警数量',
                  min: 0,
                  max: 200,
                  interval: 100,
                  position: 'left',
                  axisLine: {
                    show: true,
                    lineStyle: {
                      color: '#5470C6'
                    }
                  }
                },
                {
                  show: false,
                  splitLine: {
                    show: false
                  },
                  type: 'value',
                  name: '二级报警',
                  axisLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  }
                },
                {
                  splitLine: {
                    show: false
                  },
                  type: 'value',
                  name: '同比/环比',
                  min: 0,
                  max: 100,
                  interval: 50,
                  position: 'right',
                  axisLine: {
                    show: true,
                    lineStyle: {
                      color: '#EE6666'
                    }
                  },
                  axisLabel: {
                    formatter: '{value} %'
                  }
                },
                {
                  show: false,
                  splitLine: {
                    show: false
                  },
                  type: 'value',
                  name: '一级报警环比',
                  axisLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  }
                },
                {
                  show: false,
                  splitLine: {
                    show: false
                  },
                  type: 'value',
                  name: '二级报警同比',
                  axisLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  }
                },
                {
                  show: false,
                  splitLine: {
                    show: false
                  },
                  type: 'value',
                  name: '二级报警环比',
                  axisLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  }
                }
              ],
              series: [
                {
                  name: '一级报警',
                  type: 'bar',
                  data: [],
                  yAxisIndex: 0
                },
                {
                  name: '二级报警',
                  type: 'bar',
                  yAxisIndex: 0,
                  data: []
                },
                {
                  name: '一级报警同比',
                  type: 'line',
                  yAxisIndex: 2,
                  data: []
                },
                {
                  name: '一级报警环比',
                  type: 'line',
                  yAxisIndex: 2,
                  data: []
                },
                {
                  name: '二级报警同比',
                  type: 'line',
                  yAxisIndex: 2,
                  data: []
                },
                {
                  name: '二级报警环比',
                  type: 'line',
                  yAxisIndex: 2,
                  data: []
                },
              ]
            }
          }
      },
      methods: {
        createLineChart() {
          var chartDom = document.getElementById('lineCombine')
          var lineChart = echarts.init(chartDom)
          this.option.series.forEach(item => {
            item.data = []
          })
          this.option.xAxis[0].data = []
          request({
            url: '/dataOp/getAlarmCountByJizu',
            method: 'GET'
          }).then(res => {
            res.data.data.allCount.forEach((item) => {
              this.option.xAxis[0].data.push(item.alarmName)
              this.option.series[0].data.push(item.oneClassAlarmNum)
              this.option.series[1].data.push(item.twoClassAlarmNum)
              this.option.series[2].data.push(item.oneClassYoY)
              this.option.series[3].data.push(item.oneClassMoM)
              this.option.series[4].data.push(item.twoClassYoY)
              this.option.series[5].data.push(item.twoClassMoM)
            })
            var maxNum = []
            maxNum.push(Math.max(...this.option.series[0].data))
            maxNum.push(Math.max(...this.option.series[1].data))
            var minNum = []
            minNum.push(Math.min(...this.option.series[0].data))
            minNum.push(Math.min(...this.option.series[1].data))
            var maxRate = []
            maxRate.push(Math.max(...this.option.series[2].data))
            maxRate.push(Math.max(...this.option.series[3].data))
            maxRate.push(Math.max(...this.option.series[4].data))
            maxRate.push(Math.max(...this.option.series[5].data))
            var minRate = []
            minRate.push(Math.min(...this.option.series[2].data))
            minRate.push(Math.min(...this.option.series[3].data))
            minRate.push(Math.min(...this.option.series[4].data))
            minRate.push(Math.min(...this.option.series[5].data))
            this.option.yAxis[0].max = Math.ceil(Math.max(...maxNum) * 1.2)
            this.option.yAxis[0].min = Math.floor(Math.min(...minNum) * 0.5)
            this.option.yAxis[0].interval = Math.ceil((this.option.yAxis[0].max + this.option.yAxis[0].min) / 2)
            this.option.yAxis[2].max = Math.ceil(Math.max(...maxRate) * 1.1)
            this.option.yAxis[2].min = Math.floor(Math.min(...minRate) * 0.7)
            this.option.yAxis[2].interval = Math.ceil((this.option.yAxis[2].max + this.option.yAxis[2].min) / 2)
            this.option && lineChart.setOption(this.option)
          })
        }
      },
      mounted() {
        this.createLineChart()
        this.timer = setInterval(() => {
          this.createLineChart()
        }, 10000)
      },
      beforeDestroy () {
          clearInterval(this.timer)
      }
    }
/* eslint-disable */
</script>

<style scoped>

</style>
